<script lang="ts" setup>
import { toRefs } from 'vue';
interface NavItemT {
  key: string;
  name: string;
}
const props = defineProps({
  currentIndex: {
    type: Number,
    default: NaN,
  },
  dataList: {
    type: Array<NavItemT>,
    default: () => [],
  },
});
const { currentIndex, dataList } = toRefs(props);
</script>

<template>
  <ul class="title-nav">
    <li v-for="(item, index) in dataList" :key="index" :class="+index === currentIndex ? 'active' : ''">
      <a :href="item.key" rel="noopener noreferrer">
        {{ item.name }}
      </a>
    </li>
  </ul>
</template>

<style lang="scss" scoped>
.title-nav {
  position: fixed;
  cursor: pointer;
  top: 148px;
  right: 100px;
  z-index: 1000;
  display: block;
  @media screen and (max-width: 1880px) {
    display: none;
  }
  li {
    width: 100%;
    padding: 8px 16px;
    border-left: 1px solid var(--e-color-border2);
    a {
      color: var(--e-color-text4);
      font-size: var(--e-font-size-text);
      line-height: var(--e-line-height-text);
    }
  }
  .active {
    border-left: 1px solid var(--e-color-brand1);
    a {
      color: var(--e-color-brand1);
    }
  }
}
</style>
